<template>
  <div>
    <div class="designList">

      <el-scrollbar height="200px">
        <div class="listItem" v-for="item in materialData">
          <div class="checkBoxMain">
            <el-checkbox v-model="item.checked" @change="checkChange" :label="item.checked">
              <el-tag style=" margin-right: 5px;" type="primary">
                <svg class="coloricon" aria-hidden="true">
                  <use xlink:href="#icon-connections-fill"></use>
                </svg>
              </el-tag>
              <span slot="label">{{ item.label }}({{item.total}}人)</span>
            </el-checkbox>
          </div>
          <p v-if="nextLevelStatus" @click="nextLevel(item.label)">下级</p>

        </div>
        <!-- 
        <template >
          <el-empty description="暂无数据" :image-size="100"></el-empty>
        </template> -->

      </el-scrollbar>
    </div>

  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { getFileIcon } from "@/utils/common";
import { giveEllipsisStr1 } from "@/utils/common"
import { useRoute } from "vue-router";

const props = defineProps({
  materialData: {
    type: Array
  },
  labelName:{
    type:String
  },
  nextLevelStatus:{

    type:Boolean
  }
});
const emits = defineEmits(['update:materialData', 'onRadioChange','update:labelName',"updateLabel"])
// const selectValue = ref();
// watch(() => props.materialData, nv => {
//   let find = nv.find(find => find.checked)
//   selectValue.value = find?.id ?? null;
// }, { immediate: true, deep: true })

// 管理范围内容选中事件
const checkChange = () => {
  // console.log(e);
  // let materialData = props.materialData;
  // setChecked(materialData, e);
  // emits("update:materialData", materialData);
  emits("onRadioChange")
}

//修改checked状态
// function setChecked(arr, targetId) {
//   arr.forEach(item => {
//     if (item.id === targetId) {
//       item.checked = !item.checked;
//     } 
//   });
// }


// 点击下一级

const nextLevel=(value)=>{  
  // emits("update:labelName",value)
   emits("updateLabel",value)
  

}
</script>
<style lang='scss' scoped>
.radioGroup {
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 30px;

    .infoLeft {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }

    .infoRight {
      color: #999;
      font-size: 12px;
    }


  }
}

.pageOut {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}


.el-radio.el-radio--large {
  width: 100%;
}

.el-radio-group {
  display: block;
}

.listItem {
  margin-top: 20px;
  display: flex;

  align-items: center;
  justify-content: space-between;


  .checkBoxMain {

    display: flex;
    flex-direction: column;
    width: 100%;
    width: auto;

  }

  p{
    color: #1890FF;
    cursor: pointer;
  }
}



.coloricon {
  fill: #6AA7F8;
  font-size: 18px;

}

.el-tag--small {
  padding: 3px;
}
</style>
